/**
* @name 签约-右侧菜单
* @description:
* @param
* @return
*/
<template>
	<view class="menu-right">
		<u-sticky z-index="1">
			<view style="border-top-left-radius:25rpx; overflow: hidden;">
				<u-tabs :list="list" :is-scroll="false" :bg-color="!isLock ? 'linear-gradient(#FDE054, #FFC756)' : '#e2e2e2'"
				 :current="current" @change="change"></u-tabs>
			</view>
			<template v-if="current === 0">
				<stop-time :stopTime="stopLchendTime"></stop-time>
			</template>
			<template v-else>
				<stop-time :stopTime="stopDnrendTime"></stop-time>
			</template>
		</u-sticky>

		<view>
			<!-- 午餐 -->
			<template v-if="current === 0">
				
				<template v-if="lunchMenuList">
					<!-- 菜单列表 -->
					<menu-list v-if="lunchMenuList" :menuList="lunchMenuList" :menuExptxt="lunchExptxt" ref="menuList"></menu-list>
					
					<!-- 底部购物车按钮 -->
					<bottom-btn :stopTime="stopLchendTime" :menuId="lunchId" :date="date"></bottom-btn>
				</template>
				<template v-else>
					<view class="empty">
						<image class="img" src="https://cdn.uviewui.com/uview/template/taobao-order.png" mode=""></image>
						<view class="explain">
							<view class="tips">暂无菜单~</view>
						</view>
					</view>
				</template>
				
			</template>

			<!-- 晚餐 -->
			<template v-else>
				<!-- <stop-time :stopTime="stopDnrendTime"></stop-time> -->
				<template v-if="dinnerMenuList">
					<!-- 菜单列表 -->
					<menu-list v-if="dinnerMenuList" :menuList="dinnerMenuList" :menuExptxt="dinnerExptxt" ref="menuList"></menu-list>
					<!-- 底部购物车按钮 -->
					<bottom-btn :stopTime="stopDnrendTime" :menuId="dinnerId" :date="date"></bottom-btn>
				</template>
				<template v-else>
					<view class="empty">
						<image class="img" src="https://cdn.uviewui.com/uview/template/taobao-order.png" mode=""></image>
						<view class="explain">
							<view class="tips">暂无菜单~</view>
						</view>
					</view>
				</template>
				
			</template>
		</view>
	</view>
</template>

<script>
	import stopTime from "./components/stopTime.vue"
	import menuList from "./components/menuList.vue"
	import bottomBtn from "./components/bottomBtn.vue"

	import {
		formDate
	} from "@/utils/formDate.js"
	import {
		formTime
	} from "@/utils/formTime.js"


	export default {
		props: {
			menuList: { //菜单列表
				type: Array,
				required: true
			},
			date:{//选中日期
				type:String,
			}
		},
		components: {
			stopTime, //截单时间
			bottomBtn, //购物车按钮
			menuList, //菜单
		},
		data() {
			return {
				list: [{ //选项卡
					name: '午餐'
				}, {
					name: '晚餐'
				}],
				current: 0, //tab高亮状态 0:午餐 1:晚餐
				stopLchendTime: "", //午餐截单时间
				stopDnrendTime: "", //晚餐截单时间
				lunchMenuList: "", //午餐菜单
				dinnerMenuList: "", //晚餐菜单
				lunchExptxt: "", //午餐套餐
				dinnerExptxt: "", //晚餐套餐
				lunchId:"",//午餐id
				dinnerId:""//晚餐id
			}
		},
		methods: {
			change(idx) { //切换午餐和晚餐
				this.current = idx;
			},
			createMenuList(menuList) { //创建午餐和晚餐菜单
				// 先清空再创建
				this.lunchMenuList = ''
				this.lunchId = ''
				this.lunchExptxt = ''
				this.dinnerMenuList = ''
				this.dinnerId = ''
				this.dinnerExptxt = ''
				if (menuList.length) {
					menuList.forEach((item) => {
						if (item.type === 1) { //午餐
							this.lunchMenuList = JSON.parse(item.exptxt)[0].content
							this.lunchId = item.id
							this.lunchExptxt = JSON.parse(item.exptxt)[0] //午餐套餐
						} else { //晚餐
							this.dinnerMenuList = JSON.parse(item.exptxt)[0].content
							this.dinnerId = item.id
							this.dinnerExptxt = JSON.parse(item.exptxt)[0] //晚餐套餐
						}
					})
				}
			},
			getStopTime() { //获取截单时间
				this.stopLchendTime = this.$store.state.userModule.enterprise.lchend
				this.stopDnrendTime = this.$store.state.userModule.enterprise.dnrend
			}
		},
		watch:{
			menuList:{
				handler(val){
					this.getStopTime() //获取截单时间
					this.createMenuList(val) //创建午餐和晚餐菜单
				},
				immediate:true,
				deep:true
			}
		},
	}
</script>

<style lang="scss" scoped>
	.menu-right {
		margin-right: -5px;
		border-top-left-radius: 25rpx;
		height: 100%;
		

		
		.loading {
			width: 100%;
			height: 50vh;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.menuList {

			//菜单
			.active {
				//高亮
				display: block;
			}

			.noActive {
				//非高亮
				display: none;
			}
		}
	}
	.empty{
		height: 100%;
		min-height: 400px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.img{
			width: 164rpx;
			height: 164rpx;
			border-radius: 50%;
			margin-bottom: 10rpx;
		}
		.tips{
			color: #999999;
		}
	}
	
</style>
